試想一個情境
如果是在手機網路訊號不好的地方,使用者剛好在操作網頁
而網頁是SPA(Single Page Application),只會call API不會有網址切換的行為
有什麼方式能快速提醒使用者呢?
總不能都靠請求設定的timeout吧>>這樣還要等超時候才知道是網路問題
我們需要更直接的方式
看看 Youtube App 的範例:
今天來實現類似的範例MVP
我們需要事件監聽online
offline
來觸發我們定義的 function
並判斷navigator.onLine
true/false 去改變UI就能完成目標
function updateOnlineStatus() {
clearTimeout(offlineTimer);
clearTimeout(onlineTimer);
// Online
if (navigator.onLine) {
statusBar.classList.remove("offline");
statusBar.classList.add("online");
statusBar.style.opacity = "1";
onlineTimer = setTimeout(() => {
statusBar.style.opacity = "0";
}, 3000);
return;
}
// Offline
offlineTimer = setTimeout(() => {
statusBar.classList.remove("online");
statusBar.classList.add("offline");
statusBar.style.opacity = "1";
}, 2000);
}
window.addEventListener("online", updateOnlineStatus);
window.addEventListener("offline", updateOnlineStatus);
值得注意的是:
因此透過 setTimeout
來解決這2個優化的議題
可以嘗試中斷網路測試看看
補充: 電腦版模擬斷線的開發小技巧
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>web-navigator-online</title>
<style>
#status-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 5px;
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
.online {
background-color: #4caf50;
}
.offline {
background-color: #f44336;
}
</style>
</head>
<body>
<div id="status-bar"></div>
<h3>監聽網路 online & offline 會出現一條bar</h3>
<pre>
這個範例類似 Youtube App
<span style="color: #4caf50;">綠色</span>:有網路時出現(僅出現3秒)
<span style="color: #f44336;">紅色</span>:超過2秒沒網路時出現(一直出現)
</pre>
<script>
const statusBar = document.getElementById("status-bar");
let onlineTimer;
let offlineTimer;
function updateOnlineStatus() {
clearTimeout(offlineTimer);
clearTimeout(onlineTimer);
// Online
if (navigator.onLine) {
statusBar.classList.remove("offline");
statusBar.classList.add("online");
statusBar.style.opacity = "1";
onlineTimer = setTimeout(() => {
statusBar.style.opacity = "0";
}, 3000);
return;
}
// Offline
offlineTimer = setTimeout(() => {
statusBar.classList.remove("online");
statusBar.classList.add("offline");
statusBar.style.opacity = "1";
}, 2000);
}
window.addEventListener("online", updateOnlineStatus);
window.addEventListener("offline", updateOnlineStatus);
// 初始狀態檢查
updateOnlineStatus();
</script>
</body>
</html>